<template>
  <div class="page-container page-footer-btn">
    <van-cell-group>
      <van-field v-model="form.matrName" label="耗材" is-link clearable placeholder="请选择耗材" @focus="open" />
      <FortenScan
        ref="scan"
        propPlaceholder="请扫描SN/RFID"
        propErrorMsg="请扫描正确的SN/RFID"
        @scanCall="handleScanOver"
      />

      <FortenList ref="listItem" :propAutoFetchData='false' :propIsRadio="true" :propFlagPopup="true"
        :propSearchFields="['name','spec']" :propSearchTextAppend="'品名/品规'" propUrl="/base/matr/page" @change="change">
        <template #default="{item}">
          <van-row>
            <van-col span="4">
              <van-radio :name="item" />
            </van-col>
            <van-col span="4">品名：</van-col>
            <van-col span="14">{{item.name}}</van-col>
          </van-row>
          <van-row>
            <van-col span="4">
            </van-col>
            <van-col span="4">品规：</van-col>
            <van-col span="14">{{item.spec}}</van-col>
          </van-row>
        </template>
      </FortenList>
<!--      <van-divider><span style="font-size:15px">货位信息</span></van-divider>-->
<!--      <van-row class="adjust-row">-->
<!--        <van-col span="6">货位编码</van-col>-->
<!--        <van-col span="7">货位名称</van-col>-->
<!--        <van-col span="7">包装数量</van-col>-->
<!--        <van-col span="4">单位</van-col>-->
<!--      </van-row>-->
<!--      <van-row v-for="(stock,index) in stocks" :key="index" class="adjust-row">-->
<!--        <van-col span="6">{{stock.location_code}}</van-col>-->
<!--        <van-col span="7">{{stock.location_name}}</van-col>-->
<!--        <van-col span="7">{{stock.qty}}</van-col>-->
<!--        <van-col span="4">{{stock.package_unit}}</van-col>-->
<!--      </van-row>-->
    </van-cell-group>
    <van-tabs v-model="active"  >
      <van-tab title="库存明细">
        <FortenList ref="listItem1" :propNoCheck="true"
                    :propAutoFetchData = 'false'
                    propUrl="/wm/stock/page"
        >
          <template  #default="{item, index}"  >
            <van-row >
              <van-col span="3">耗材:</van-col>
              <van-col span="21">{{item.matrName}}</van-col>
            </van-row>
            <van-row >
              <van-col span="3">品规:</van-col>
              <van-col span="21">{{item.matrSpec}}</van-col>
            </van-row>
            <van-row >
              <van-col span="3">RFID:</van-col>
              <van-col span="10"> {{item.rfid == null ? '无' :item.rfid}}</van-col>
              <van-col span="3">SN:</van-col>
              <van-col span="8">{{item.sn}}</van-col>
            </van-row>
            <van-row >
              <van-col span="3">仓库:</van-col>
              <van-col span="9">{{item.warehouseName}}</van-col>
              <van-col span="3">库位:</van-col>
              <van-col span="9">{{item.locationName}}</van-col>
            </van-row>
          </template>
        </FortenList>
      </van-tab>
      <van-tab title="库存汇总">
        <van-divider><span style="font-size:15px">货位信息</span></van-divider>
        <van-row class="adjust-row">
          <van-col span="6">仓库名称</van-col>
          <van-col span="7">货位名称</van-col>
          <van-col span="7">包装数量</van-col>
          <van-col span="4">单位</van-col>
        </van-row>
        <van-row v-for="(stock,index) in stocks" :key="index" class="adjust-row">
          <van-col span="6">{{stock.warehouse_name}}</van-col>
          <van-col span="7">{{stock.location_name}}</van-col>
          <van-col span="7">{{stock.qty}}</van-col>
          <van-col span="4">{{stock.package_unit}}</van-col>
        </van-row>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import barcodeParse from '@/util/barcodeParse.js'

export default {
  name: '耗材货位搜索',
  data() {
    return {
      scan: '',
      scanLocation: '',
      form: {},
      stocks: [],
      currentLocation: {},
      active: ''
    }
  },
  props: {
    propFlowKey: String
  },
  components: {},
  methods: {
    //扫描
    async handleScanOver(scanValue) {
      this.scan = scanValue
      this.reloadList()
      this.scan = ''
      this.form = {}
    },
    reloadList() {
      try {
        this.$refs.listItem1.tablePage.currentPage = 1
        let wrapper = this.$newWrapper().eq('matrId', this.strings.defaultString(this.form.id, -1))
        if (this.scan) {
          let codeType = barcodeParse.barCodeType(this.scan)
          if (codeType != 'SN' && codeType != 'RFID') {
            this.$notify.warning('请扫描有效的条码')
            return
          }
          if (codeType == 'SN') {
            wrapper = this.$newWrapper().eq('sn', this.scan)
          } else if (codeType == 'RFID') {
            wrapper = this.$newWrapper().eq('rfid', this.scan)
          }
          this.getStockList(wrapper)
        } else {
          if (this.form.id) {
            this.getStock()
          }
        }
        wrapper.orderConditions.push({ field: 'sn', rule: 'desc' })
        this.$refs.listItem1.setQueryWrapper(wrapper)
        // eslint-disable-next-line no-empty
      } catch (e) {
      }
    },
    getStockList(wrapper) {
      let params = {
        queryString: JSON.stringify(wrapper.queryConditions)
      }
      this.$ajax.get('/wm/stock/list', {
        params
      }).then(resp => {
        if (resp.data && resp.data.length > 0) {
          this.form.id = resp.data[0].matrId
          this.getStock()
        } else {
          this.$notify.warning('不能识别的条码！')
          return
        }
        this.scan = ''
      })
    },
    getStock() {
      let params = {
        matrId: this.form.id
      }
      console.log(params)
      this.$ajax.get('/wm/stock/getStockByMatr', {
        params
      }).then(resp => {
        this.stocks = resp.data
        this.scan = ''
      })
    },
    //耗材选择事件
    afterMatrSelect() {
      this.stocks = []
      this.reloadList()
    },
    open() {
      this.$refs.listItem.show()
    },
    change(item) {
      this.form = item
      this.form.matrId = item.id
      this.form.matrName = item.name
      this.afterMatrSelect()
    },
    reload() {
      this.$refs.scan.focus()
      this.form = {}
      this.stocks = []
      this.reloadList()
    },
  },
  mounted() {
    this.$refs.scan.focus()
  }
}
</script>

<style lang="scss" scoped>
  .van-col {
    text-align: center;
  }

  .adjust-row {
    font-size: 14px;
    margin: 5px;
    line-height: 20px;
    text-align: left;
    text-overflow: ellipsis; //文字隐藏后加省略号
    /*white-space: nowrap; //强制不换行*/
  }
</style>
